<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部筛选栏 -->
        <div class="myhead">
          <el-form :inline="true" label-width="60px" class="myform" :model="myform" ref="form">
            <el-form-item label="关键字">
              <el-input v-model="myform.keyword" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <el-button @click="addshows" type="success" size="small" round class="mybtn">
              <i class="el-icon-edit"></i> &nbsp;&nbsp;&nbsp; 新增技巧
            </el-button>
          </el-form>
        </div>
        <!-- 信息提示区 -->
        <el-alert title="数据一共 11 条" type="info" show-icon> </el-alert>
        <!-- 表格区域 -->
        <el-table :data="tableList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80"> </el-table-column>
          <<<<<<< HEAD
          <el-table-column prop="title" label="文章标题" width="350"> </el-table-column>
          =======
          <el-table-column label="文章标题" width="350">
            <template slot-scope="scope">
              <div @click="openvido">
                <span>{{ scope.row.title }}</span> <i class="el-icon-film vido" v-if="scope.row.videoURL !== ''"></i>
              </div>
            </template>
          </el-table-column>
          >>>>>>> feat/skills
          <el-table-column prop="visits" label="阅读数" width="120"> </el-table-column>
          <el-table-column prop="username" label="录入人" width="120"> </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100" :formatter="stateFmater"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="preview(scope.row)">预览</el-button>
              <el-button type="text" @click="enable(scope.row)">
                <span v-if="scope.row.state == 1">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button :disabled="scope.row.state == 0" type="text" @click="addshow(scope.row)">修改</el-button>
              <el-button :disabled="scope.row.state == 0" type="text" @click="delarticle(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          background
          class="mypagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>

      <!-- 新增对话框 -->
      <Skills :dialogshow.sync="dialogshow" ref="mySkills" @getList="getList"></Skills>
      <!-- 预览对话框 -->
      <Preview :showpreview.sync="showpreview" ref="mypreview"></Preview>
      <<<<<<< HEAD =======
      <!-- 预览视频对话框 -->
      <Showurl :showurl.sync="showurl"></Showurl>
      >>>>>>> feat/skills
    </div>
  </div>
</template>

<script>
// 导入接口
import { list, remove, changeState } from '@/api/hmmm/articles.js'
// 导入添加组件
import Skills from '@/module-hmmm/components/skills.vue'
// 导入预览组件
import Preview from '@/module-hmmm/components/preview.vue'
import Showurl from '@/module-hmmm/components/articles-preview.vue'
export default {
  data() {
    return {
      options: [
        {
          value: '0',
          label: '启用'
        },
        {
          value: '1',
          label: '禁用'
        }
      ],
      showurl: false, //预览视频对话框显示和隐藏
      value: '',
      // 预览对话框的显示与隐藏
      showpreview: false,
      // 表单数据源
      myform: {
        keyword: '',
        state: ''
      },
      // 表格数据源
      tableList: [],
      pagesizes: [5, 10, 15, 20, 30],
      total: 0, //总数据条数
      current: 1, // 展示第几页
      pagesize: 5, //每页展示几条数据,
      // 新增和修改的弹出层显示与隐藏
      dialogshow: false
    }
  },
  methods: {
    // 打开视频预览
    openvido() {
      this.showurl = true
    },
    // 页容量变化
    handleSizeChange(val) {
      // console.log(val)
      // 赋值新的页容量
      this.pagesize = val
      // 更新数据
      this.getList()
    },
    // 当前页变化
    handleCurrentChange(val) {
      // console.log(val)
      // 赋值当前页
      this.current = val
      // 更新数据
      this.getList()
    },
    // 获取列表数据
    async getList() {
      let { data: res } = await list({
        page: this.current,
        pagesize: this.pagesize
      })
      // console.log(res)
      // 总页数赋值
      this.total = res.counts
      // 表格数据源赋值
      this.tableList = res.items
      // console.log(res.items)
    },
    // 打开修改弹出框
    addshow(row) {
      this.dialogshow = true
      this.$refs.mySkills.getdetails(row)
    },
    // 打开新增弹出框
    addshows() {
      this.dialogshow = true
    },
    // 打开预览弹出层
    preview(row) {
      this.showpreview = true
      this.$refs.mypreview.getlist(row)
    },
    // 删除文章
    delarticle(row) {
      this.$confirm('确定要删除当前文章吗？')
        .then(async () => {
          // console.log('删除')
          // 删除
          let res = await remove(row)
          // console.log(res)
          if (res.status !== 200) return
          // 提示消息
          this.$message.success('删除成功')
          // 刷新数据
          this.getList()
          // 删除当前页最后一条数据掉转到上一页
          this.returnPage()
        })
        .catch(() => {
          console.log('取消')
        })
      // remove
    },
    // 按钮状态
    async enable(row) {
      let res = await changeState({
        id: row.id,
        state: row.state == 1 ? 0 : 1
      })
      // console.log(res)
      if (res.status !== 200) return
      // 更新状态
      this.getList()
      // 提示操作成功
      this.$message.success('操作成功')
    },
    // 简单的枚举转换
    stateFmater(data) {
      // console.log(data)
      if (data.state == 0) {
        return '已启用'
      } else if (data.state != '' && data.state === 1) {
        return '已禁用'
      }
    },
    // 清空搜索栏
    clear() {
      // 清空数据
      ;(this.value = ''), (this.myform = {})
      // 刷新列表
      this.getList()
    },
    // 搜索功能
    async search() {
      let { data: res } = await list({
        page: this.current,
        pagesize: this.pagesize,
        keyword: this.myform.keyword,
        state: this.value
      })
      // console.log(res)
      // 总页数赋值
      this.total = res.counts
      // 表格数据源赋值
      this.tableList = res.items
    },
    // 分页器当前页没有数据自动跳转到上一页
    returnPage() {
      console.log('删除之后的总页数', this.total - 1)
      if (this.total - 1 === (this.current - 1) * this.pagesize && this.total !== 0) {
        this.current-- // 当前页减一,跳转到上一页
        // 关闭删除操作的弹窗--并重新请求数据
        this.getList()
      }
      // 关闭删除操作的弹窗--并重新请求数据
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  components: {
    // 注册组件
    Skills,
    Preview,
    Showurl
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
  .myhead {
    padding-left: 15px;
  }
  .mybtn {
    float: right;
  }
  .line {
    height: 30px;
    background-color: #f4f4f5;
    color: #909399;
  }
  .mypagination {
    text-align: right;
    margin-top: 20px;
  }
  .vido {
    margin-left: 8px;
    font-size: 20px;
    color: #1493fa;
    cursor: pointer;
  }
}
</style>
